import React, { ReactElement, useState } from 'react';
import { View, Text, TextInput, Image, ScrollView } from 'react-native';

import styles from './style';
import Notch, { NotchType } from '../../components/Notch';
import NavBar from '../../components/NavBar';
import { back, sureSave } from './actions';
import { APP_LIGHT_GREY } from '../../constant/color';
import { setIcon } from '../../constant/resource';
import Button from '../../components/Button';

export default (): ReactElement => {
  const [password, setPassword] = useState('');
  const [verifyPassword, setVerifyPassword] = useState('');

  return (
    <Notch type={NotchType.Top} style={styles.container}>
      <NavBar title="修改密码" backAction={back} />
      <ScrollView style={styles.content}>
        <View style={styles.loadTitle}>
          <Image source={setIcon} style={styles.icon} />
          <Text style={styles.title}>修改密码</Text>
        </View>
        <View style={styles.loadInputs}>
          <TextInput
            style={styles.input}
            placeholder="请输入你的密码"
            placeholderTextColor={APP_LIGHT_GREY}
            secureTextEntry
            value={password}
            onChangeText={setPassword}
            maxLength={8}
          />
          <TextInput
            style={styles.input}
            placeholder="请再次输入你的密码"
            placeholderTextColor={APP_LIGHT_GREY}
            secureTextEntry
            value={verifyPassword}
            onChangeText={setVerifyPassword}
            maxLength={8}
          />
        </View>
        <Text style={styles.desc}>
          请设置6-8位密码，包含数字、大小写字母和特殊符号中至少两种组合
        </Text>
      </ScrollView>
      <Button
        style={styles.save}
        text="保存"
        textStyle={styles.saveDesc}
        onPress={(): void => {
          sureSave(password, verifyPassword);
        }}
      />
    </Notch>
  );
};
